<!--推广链接-->

<template>
    <el-container>
        <el-header>
            <el-row :gutter="20" class="filter-row">
                <el-col :span="4">
                    <el-input
                            placeholder="请输入书籍名称"
                            v-model="filters.bookName"
                            clearable
                    />
                </el-col>
                <el-col :span="4">
                    <el-input
                            placeholder="请输入链接名称"
                            v-model="filters.linkName"
                            clearable
                    />
                </el-col>
                <el-col :span="4">
                    <el-input
                            placeholder="请输入充值模版名称"
                            v-model="filters.templateName"
                            clearable
                    />
                </el-col>
                <el-col :span="4">
                    <el-input
                            placeholder="请输入广告商"
                            v-model="filters.advertiser"
                            clearable
                    />
                </el-col>
                <el-col :span="7">
                    <el-date-picker
                            v-model="filters.date"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            clearable
                    />
                </el-col>
                <el-col style="margin-top: 10px" :span="4">
                    <el-select
                            v-model="filters.status"
                            placeholder="请选择链接状态"
                            clearable
                    >
                        <el-option
                                v-for="item in linkStatuses"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                        />
                    </el-select>
                </el-col>
                <el-col style="margin-top: 10px" :span="4">
                    <el-button type="primary" @click="search">搜索</el-button>
                    <el-button @click="reset">重置</el-button>
                </el-col>
            </el-row>

            <div style="margin-top: 20px;">
                <el-button type="warning" @click="exportData">导出</el-button>
            </div>
        </el-header>
        <el-main>
            <el-table :data="tableData">
                <el-table-column type="selection" width="55" />
                <el-table-column label="推广信息">
                    <template #default="scope">
                        <div>
                            <div>{{ scope.row.id }}</div>
                            <el-link :underline="false" @click="copyToClipboard(scope.row.info)">
                                {{ scope.row.info }}
                            </el-link>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="bookName" label="书籍名称" />
                <el-table-column prop="chapterName" label="章节名称" />
                <el-table-column prop="payChapter" label="付费章节" />
                <el-table-column prop="price" label="章节价格" />
                <el-table-column prop="status" label="链接状态">
                    <template #default="scope">
                        <el-tag :type="getTagType(scope.row.status)">{{ scope.row.status }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="回传配置">
                    <template #default="scope">
                        <el-tag :type="getTagType(scope.row.status)">{{ scope.row.status }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="applyName" label="应用名称" />
                <el-table-column prop="templateName" label="充值模版名称" />
                <el-table-column prop="advertiserType" label="广告类型" />
                <el-table-column prop="createdBy" label="创建人" />
                <el-table-column prop="createdTime" label="创建时间" />
                <el-table-column fixed="right" label="广告配置" width="120">
                    <template #default="scope" >
                        <el-button type="text" size="small" @click="openPreviewDialog">扫码预览</el-button>
                        <el-button type="text" style="margin-left: 0px" size="small" @click="copyToClipboard('复制推广链接')">复制推广链接</el-button>
                        <el-button type="text" style="margin-left: 0px" size="small" @click="copyToClipboard('复制启动页面')">复制启动页面</el-button>
                        <el-button type="text" style="margin-left: 0px" size="small" @click="copyToClipboard('复制启动参数')">复制启动参数</el-button>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="链接操作" width="120">
                    <template #default="scope">
                        <el-button type="text" size="small" @click="openDialog(scope.row)">回传配置</el-button>
                        <el-button style="margin-left: 0px" type="text" size="small" @click="openEditDialog(scope.row)">链接修改</el-button>
                        <el-button style="margin-left: 0px" @click="goTORoi(scope.row)" type="text" size="small">链接统计</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="margin-top: 20px; display: flex; justify-content: flex-end;">
                <el-pagination
                        v-model:current-page="currentPage"
                        v-model:page-size="pageSize"
                        :page-sizes="[10, 20, 30, 40]"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="tableData.length"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                />
            </div>
        </el-main>
        <el-dialog title="广告回传配置-链接" v-model="dialogVisible" width="500px">
            <el-form :model="form">
                <el-form-item label="广告配置状态">
                    <el-switch v-model="form.configStatus" active-text="启用" inactive-text="关闭" />
                </el-form-item>
                <el-form-item label="广告配置名称">
                    <el-input v-model="form.configName" />
                </el-form-item>
                <el-form-item label="广告类型">
                    <el-select v-model="form.adType" placeholder="请选择广告类型">
                        <el-option label="头条" value="头条"></el-option>
                        <el-option label="视频" value="视频"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="充值回传模式">
                    <el-radio-group v-model="form.rechargeMode">
                        <el-radio label="全量订单">全量订单</el-radio>
                        <el-radio label="首次订单">首次订单</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="回传比例">
                    <el-radio-group v-model="form.reportRatio">
                        <el-radio label="全量">全量</el-radio>
                        <el-radio label="固定间隔">固定间隔</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="VIP充值上报">
                    <el-switch v-model="form.vipReport" active-text="开启" inactive-text="关闭" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button style="margin-left: 300px" @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submitForm">提交</el-button>
            </div>
        </el-dialog>
        <el-dialog title="修改推广链接" v-model="editDialogVisible" width="500px">
            <el-form :model="editForm">
                <el-form-item label="推广名称">
                    <el-input v-model="editForm.info" disabled />
                </el-form-item>
                <el-form-item label="充值模版">
                    <el-select v-model="editForm.templateName">
                        <el-option label="A" value="A"></el-option>
                        <el-option label="B" value="B"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="付费章节序号">
                    <el-input v-model="editForm.payChapter" />
                </el-form-item>
                <el-form-item label="千字价格（分）">
                    <el-input v-model="editForm.price" />
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="editForm.remark" placeholder="请输入备注" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button style="margin-left: 300px" @click="editDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submitEditForm">确定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="预览" v-model="previewDialogVisible" width="30%">
            <p>此处可放置二维码</p>
        </el-dialog>
    </el-container>
</template>

<script setup>
    import { ref } from 'vue';
    import { ElMessageBox, ElMessage } from 'element-plus';
    import router from "../../router";

    const filters = ref({
        bookName: '',
        linkName: '',
        templateName: '',
        advertiser: '',
        date: [],
        status: ''
    });

    const linkStatuses = [
        { value: 'normal', label: '正常' },
        { value: 'disabled', label: '禁用' }
    ];

    const tableData = ref([
        {
            id: 10791,
            info: 'tgadmin-06192049-高富商父母',
            bookName: '高富商父母生了奢奢我',
            chapterName: '了解奢奢的我',
            payChapter: 3,
            price: 3,
            status: '正常',
            applyName: '非凡观文',
            templateName: 'A',
            advertiserType: '头条',
            createdBy: '超级管理员',
            createdTime: '2024-06-19 20:49'
        }
    ]);

    const total = ref(tableData.value.length);

    const dialogVisible = ref(false);
    const editDialogVisible = ref(false);
    const previewDialogVisible = ref(false);

    const form = ref({
        configStatus: false,
        configName: '',
        adType: '',
        rechargeMode: '全量订单',
        reportRatio: '全量',
        vipReport: false
    });

    const editForm = ref({
        info: '',
        templateName: '',
        payChapter: '',
        price: '',
        remark: ''
    });

    const search = () => {
        ElMessage.success('搜索功能未实现');
    };

    const reset = () => {
        filters.value = {
            bookName: '',
            linkName: '',
            templateName: '',
            advertiser: '',
            date: [],
            status: ''
        };
    };

    const exportData = () => {
        ElMessage.success('导出功能未实现');
    };

    const copyToClipboard = (text) => {
        navigator.clipboard.writeText(text).then(() => {
            ElMessage.success('复制成功');
        }).catch(() => {
            ElMessage.error('复制失败');
        });
    };

    const handleCurrentChange = (page) => {
        ElMessage.info(`当前页: ${page}`);
    };

    const getTagType = (status) => {
        switch (status) {
            case '正常':
                return 'success';
            case '禁用':
                return 'danger';
            default:
                return '';
        }
    };

    const openDialog = (row) => {
        form.value.configName = row.info;
        dialogVisible.value = true;
    };

    const submitForm = () => {
        ElMessage.success('提交成功');
        dialogVisible.value = false;
    };

    const openEditDialog = (row) => {
        editForm.value = {
            info: row.info,
            templateName: row.templateName,
            payChapter: row.payChapter,
            price: row.price,
            remark: ''
        };
        editDialogVisible.value = true;
    };

    const submitEditForm = () => {
        ElMessage.success('修改成功');
        editDialogVisible.value = false;
    };

    const openPreviewDialog = () => {
        previewDialogVisible.value = true;
    };

    const goTORoi = (row) => {
        router.push("/main/roiRechargeModule");
    };

</script>

<style scoped>
    .filter-row {
        align-items: center;
    }
    .el-button {
        margin-right: 10px;
    }
</style>
